<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    div{
        margin-top: 30px;
        width: 200px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50px;
    }
    </style>
</head>

<body>
    <input type="button" value="移动到400" id="btn1">
    <input type="button" value="移动到800" id="btn2">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
        //点击第一个按钮移动到400
        //点击第一个按钮移动到800
        my$("btn1").onclick = function () {
            animate(my$("dv"), 400);
        }
        my$("btn2").onclick = function () {
            animate(my$("dv"), 800);
        }

        function animate(element, target) {
            clearInterval(element.timeId);
            element.timeId = setInterval(function () {
                var current = element.offsetLeft;
                var step = 10;
                step = current < target ? step : -step;
                current += step;
                if (Math.abs(current - target) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    clearInterval(element.timeId);
                    element.style.left = target + "px";

                }
            }, 20);
        }
        // function animate(element, target) {
        //     clearInterval(element.timeId);
        //     //一会儿要清理定时器；保证只产生一个定时器
        //     var timeId = setInterval(function () {
        //         var current = element.offsetLeft; //获取属性
        //         var step = 10;
        //         step = current < target ? step : -step;
        //         //判断当前位置如果大于目标位置，则像反方向移动
        //         current += step;
        //         //每次移动后的距离
        //         //判断当前移动后的位置是否到达目标位置，以及未到达的距离与step值比较
        //         if (math.abs(current - target) > math.abs(step)) {
        //             element.style.left = current + "px";
        //         } else {
        //             clearInterval(element.timeId);
        //             element.style.left = target + "px";
        //             //未到达而且小于step就直接到达目标位置
        //         }
        //     }, 20)
        // }
    </script>
    <!-- //封装移动到动画函数 -->
    <!-- <script>
        function animate(element, target) {
            clearInterval(element.timeId);
            element.timeId = setInterval(function () {
                var current = element.offsetLeft;
                var step = 10;
                step = current < target ? step : -step;
                current += step;
                if (Math.abs(current - target) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    clearInterval(element.timeId);
                    element.style.left = target + "px";

                }
            }, 20);
        }
    </script> -->
</body>

</html>